<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.0.min.js"></script>
</head>
<body>
<form>
    产品名: <input readonly type="text" id="name"><br>
    单价: <input readonly type="text" id="price"><br>
    选择购买数量: <input type="text" id="num"><br>
    你要使用哪个账户: <select id="c2">
                          <option>--请选择--</option>
                      </select>
                      <select id="c2_a">
                          <option></option>
                      </select><div id="div"></div>
    <br>
    <input id="btn" type="button" value="确定购买">
</form>
<table width="100%" id="shouye">
    <tr>
        <td align="center"><a href="/airong/index.html">首页</a></td>
        <!--    <td align="center"><a href="#"><input type="button" id="lc" value="理财"></a></td>-->
        <td align="center"><a href="" id="lc">理财</a></td>
        <td align="center"><a href="/airong/personalCenter.html">我的</a></td>

    </tr>
</table>
</body>
    <script>
        let urll = "/airong/cc?action=getSessionID";
        let paramsl = {}
        $.get(urll,paramsl,function (sessionID){
            document.getElementById('lc').href= "products.html?uid="+sessionID;
        },"text")

        //获取地址栏参数，name:参数名称
        function getUrlParms (name) {
            let url = window.location.href;//获取请求进来的完整url
            let tstr = url.substring(url.indexOf('?') + 1).split('&');//先截取url的?后面的参数部分，在根据&分割成参数数组
            let result = {};
            tstr.forEach((item) => {
                let res = item.split('=');//res为type,my-component1.vue。  res[0]为type，res[1为]my-component1.vue
                result[res[0]] = res[1];//构造成键值对形式 res[0]为键，res[1]为值 例：type: "my-component1.vue"
            });
            return result[name];//通过键取值
        };
        let name = getUrlParms("name");
        let price = getUrlParms("price");
        let uid = getUrlParms("uid");
        let id = getUrlParms("id");

        // decodeURI() js中解决中文乱码

        $("#name").val(decodeURI(name));
        $("#price").val(price);

        findC2ID(uid)

        function findC2ID(uid){
            let url = "/airong/proServlet?action=findC2";
            let params = {uid: uid}
            $.get(url,params,function (data) {
                if (data != null){
                    $("#c2").html("");
                    $.each(data,function (index,element) {
                        $("#c2").append("<option>"+ element.id +"</option>");
                    });
                }else {
                    alert("去开户");
                }
            },"json")
        }

        $("#c2").change(function () {
            let url = "/airong/proServlet?action=findAmountByC2ID";
            let params = {cid: $("#c2").val()}
            $.get(url,params,function (data) {
                $("#c2_a").html("")
                $("#c2_a").append("<option>"+ data.balance +"</option>")
            },"json");
        });

        $("#btn").click(function () {
            let amount = $("#c2_a").val();
            let price = $("#price").val();
            let num = $("#num").val();
            if (Number.parseInt(amount) < (Number.parseInt(num)*Number.parseInt(price))){
                $("#div").html("");
                $("#div").append("<a style='color: red'>余额不足</a>")
            }else {
                let url = "/airong/proServlet?action=buyNum";
                let params = {
                    num: $("#num").val(),
                    uid: uid,
                    id: id,
                    cid: $("#c2").val()
                }
                $.get(url,params,function (flag) {
                    if (flag === "Y"){
                        // 购买成功
                        window.location.href = "myproducts.html?uid="+uid;
                    }else {
                        alert("购买失败")
                        window.location.href = "products.html?uid="+uid;
                    }
                });
            }
        });
    </script>
<style>
    div {
        width: 100%;
        text-align: center;
    }
    #shouye{
        position: absolute;
        top: 600px;
        padding: 5px;
        margin: 4px;
        background-color: bisque;
        font-size: 20px;
        text-align: center;
        z-index: 1;
    }

</style>
</html>